<div class="demo-table-container mat-elevation-z4">

  <table-header-demo (shiftColumns)="propertiesToDisplay.push(propertiesToDisplay.shift())"
                     (toggleColorColumn)="toggleColorColumn()">
  </table-header-demo>

  <cdk-table #table [dataSource]="dataSource">

    <!-- Column Definition: ID -->
    <ng-container cdkColumnDef="userId">
      <cdk-header-cell *cdkHeaderCellDef> ID </cdk-header-cell>
      <cdk-cell *cdkCellDef="let row"> {{row.id}} </cdk-cell>
    </ng-container>

    <!-- Column Definition: Progress -->
    <ng-container cdkColumnDef="progress">
      <cdk-header-cell *cdkHeaderCellDef> Progress </cdk-header-cell>
      <cdk-cell *cdkCellDef="let row">
        <div class="demo-progress-stat">{{row.progress}}%</div>
        <div class="demo-progress-indicator-container">
          <div class="demo-progress-indicator"
               [style.background]="row.progress > 50 ? 'green' : 'red'"
               [style.opacity]="getOpacity(row.progress)"
               [style.width.%]="row.progress"></div>
        </div>
      </cdk-cell>
    </ng-container>

    <!-- Column Definition: Name -->
    <ng-container cdkColumnDef="userName">
      <cdk-header-cell *cdkHeaderCellDef> Name </cdk-header-cell>
      <cdk-cell *cdkCellDef="let row"> {{row.name}} </cdk-cell>
    </ng-container>

    <!-- Column Definition: Color -->
    <ng-container cdkColumnDef="color">
      <cdk-header-cell *cdkHeaderCellDef>Color</cdk-header-cell>
      <cdk-cell *cdkCellDef="let row" [style.color]="row.color"> {{row.color}} </cdk-cell>
    </ng-container>

    <cdk-header-row *cdkHeaderRowDef="propertiesToDisplay"></cdk-header-row>
    <cdk-row *cdkRowDef="let row; columns: propertiesToDisplay"></cdk-row>
  </cdk-table>
</div>
